<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        #contianer{
            background-color: rgba(132,12,12,0.1);
        }
        #img_container{
            width: 100vw;
        }
        #img_container > img {
            max-width: 100%;
            max-height: 100%;
        }
        @media (min-width: 768px){
            #img_container{
                margin: auto;
                width: 60vw;
            }
            #img_container > img {
                max-width: 100%;
                max-height: 100%;
            }
        }

    </style>
</head>
<body>
<div id = "contianer">
<div id = "img_container">
    <img src="images/resume.png" alt=""/>
</div>
</div>
</body>
<script>
    function loadJs() {
        const result = window.matchMedia("(min-width:768px)")
        if(result.matches){
            var script=document.createElement("script");

            script.setAttribute("type", "text/javascript");

            script.setAttribute("src", "./js/canvas-nest.min.js");

            var heads = document.getElementsByTagName("head");

            if(heads.length)
                heads[0].appendChild(script);
            else
                document.documentElement.appendChild(script);
        }
    }
    window.addEventListener("resize",loadJs)
</script>
</html>